<style lang="scss" scoped>
#congenica-left {
    .collapse{
        display:block;
        ul li span{
            display: none;
        }
        ul li .iconstyle{
            left:28px;
        }
    }
    .nav-left {
        position: relative;
        background: #3C3F60;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
        .headPhoto {
            background: #3C3F60;
            text-align: center;
            padding-top: 17px;
            .username {
                padding-bottom: 10px;
                color: #6C7695;
                font-size: 16px;
            }
        }
        .el-menu {
            border-right: 1px solid #3C3F60;
            .el-menu-item {
                &.is-active {
                    background: #2B3245 !important;
                }
            }
        }
        a {
            display: block;
            text-align: center;
            font-size: 16px;
            color: #EBEEF5;
        }
        a:hover {
            background: #2B3245;
        }
        a.active {
            background: #2B3245;
        }
        .iconstyle {
            position: absolute;
            left: 35px;
            line-height: 2em;
            width: 20px;
            height: 20px;
            margin-top: 7px;
            top: 10px;
            background: url('../../../static/icon/menu.png');
        }
    }
}


</style>
<template>
    <div id="congenica-left" >
        <div :class="menu">
            <div class="headPhoto">
                <img src="/static/images/home/headpic.jpg" />
                <div class="username">{{currentUser}}</div>
            </div>
            <el-menu background-color="#3C3F60" text-color="#EBEEF5" router :default-active="$route.path"
             active-text-color="#EBEEF5" :collapse = "collapsed">
                <el-menu-item index="/congenica">
                    <i class="iconstyle mydata"></i>
                    <span slot="title" style="margin-left:50px">我的数据</span>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
export default {
    name: "rare-left",
    props:["collapse"],
    data() {
        return {
            collapsed: false,
            currentUser: ''
        }
    },
    computed:{
        menu(){
            return this.collapse?'nav-left collapse':'nav-left'
        }
    },
    methods: {

    },
    created() {
        this.currentUser = this.$store.state.username;
    }
}
</script>



